<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div class="compony-info">
        <img src="../assets/compony.png" alt="电商管理" />
        <span>电商后台管理系统</span>
      </div>
      <div class="person-info">
        <el-button @click="exit"> 退出登录 </el-button>
      </div>
    </el-header>
    <el-container>
      <!-- 导航 -->
      <el-aside width="data.isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggle">
          <div :style="'transform: rotateZ('+ (data.isCollapse ? '90deg':'0deg') +');'">|||</div>
        </div>
        <el-menu
          background-color="#313743"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          unique-opened
          :collapse="data.isCollapse"
          router
          :defaultActive="data.activePath"
        >
          <el-sub-menu
            v-for="menu in data.leftMenu"
            :key="menu.id"
            :index="'/' + menu.path"
          >
            <template #title>
              <i :class="data.iconfont[menu.id]"></i>
              <span class="extrude">{{ menu.authName }}</span>
            </template>
            <template v-if="menu.children">
              <el-menu-item @click="changeActivePath('/home/'+childMenu.path)" v-for="childMenu in menu.children" :key="childMenu.id" :index="'/home/'+childMenu.path">
                <template #title>
                  <div>
                    <el-icon><Menu /></el-icon>
                    <span class="extrude">{{ childMenu.authName }}</span>
                  </div>
                </template>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 脚注 -->
        <el-footer>
          
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>


<script>
import { useRouter } from "vue-router";
import axios from "../axios";
import { getCurrentInstance, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
// import { conformsTo } from "lodash";
// import { left } from "@popperjs/core";
export default {
  name: "Home",
  setup() {
    // 获取当前组件this
    const _this = getCurrentInstance();
    // 路由
    const router = useRouter();
    // 所有的数据挂载对象
    let data = reactive({
      // 左侧菜单栏数据
      leftMenu: [],
      // 是否折叠
      isCollapse:false,
      // iconfont
      iconfont:{
        '125':"iconfont icon-user",
        '103':"iconfont icon-3702mima",
        '101':"iconfont icon-shangpin",
        '102':"iconfont icon-danju",
        '145':"iconfont icon-baobiao",
      },
      // 活动路径
      activePath:'',
    });

    // 生命周期函数
    onMounted(() => {
      // 获取左侧菜单栏数据
      getLeftMenuData("menus");
      // 活动路径
      data.activePath = JSON.parse(sessionStorage.getItem('activePath')) || "/home/users";
    });

    // 方法区
    // 获得数据
    async function getLeftMenuData(address) {
      await axios.get(address).then((res) => {
        res = res.data;
        if (res.meta.status !== 200) {
          return ElMessage.error(res.meta.msg);
        }
        data.leftMenu = res.data;
        ElMessage.success("获取数据成功");
      });
    }
    // 退出登录
    const exit = () => {
      sessionStorage.clear();
      router.push({
        path: "/login",
      });
    };
    // toggle折叠
    const toggle = ()=>{
      data.isCollapse = !data.isCollapse;
    };
    // 改变活动路径
    const changeActivePath = (activePath)=>{
      sessionStorage.setItem('activePath',JSON.stringify(activePath));
    }

    return {
      // 数据
      data,

      // 方法
      // 退出
      exit,
      // 折叠
      toggle,
      // 活动路径
      changeActivePath,
    };
  },
};
</script>

<style lang="less" scoped>
* {
  color: rgb(255, 255, 255);
}
// 左侧导航hover样式

.extrude{
  transition: all 0.3s;
}
.extrude:hover{
  color: #47B6FF;
}
// .extrude{
//   color: red;
// }
.el-container {
  width: 100%;
  height: 100%;
  .el-header {
    background-color: #2c3235;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .compony-info {
      font-size: 22px;
      display: flex;
      align-items: center;
      > span {
        margin-left: 15px;
      }
    }
    .person-info {
      .el-button {
        color: rgb(151, 151, 151);
      }
    }
  }
  .el-aside {
    background-color: #313743;
    .iconfont{
      margin-right: 7px;
    }
    .toggle-button{
      height: 30px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      letter-spacing: 2px;
      background-color: #a8a8a841;
      div{
        transition: all 0.5s;
      }
    }
    .el-menu{
      border: none;
    }
  }
  .el-main {
    background-color: #e9edf1;
  }
  .el-footer {
    background-color: #2c3235;
  }
}
</style>